<!DOCTYPE html>
<html lang="en">
//
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加客房信息</title>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="./element-ui-2.13.0/lib/theme-chalk/index.css">
    <script src="./element-ui-2.13.0/lib/index.js"></script>
</head>

<body>
    <div id="app" style="width: 509px; box-shadow: 2px 2px 12px #909090;" >
        <h2>添加房间</h2>
        <el-form :model="room" :rules="rules" ref="regist" label-width="100px" class="demo-ruleForm">
            <el-form-item label="房间名称" prop="rname">
                <el-input v-model="room.rname" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="房间价格" prop="price">
                <el-input v-model="room.price" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="房间类型" prop="type">
                <el-select v-model="room.type" placeholder="请选择房间类型">
                    <el-option label="大床房" value="大床房"></el-option>
                    <el-option label="标间" value="标间"></el-option>
                    <el-option label="豪华套房" value="豪华套房"></el-option>
                    <el-option label="普通大床房" value="普通大床房"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="房间状态" prop="state">
                <el-radio-group v-model="room.state">
                    <el-radio label="空闲" value="空闲">空闲</el-radio>
                    <el-radio label="入住" value="入住">入住</el-radio>
                    <el-radio label="维修" value="维修">维修</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="房间简介" prop="mark">
                <el-input type="textarea" v-model="room.mark" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('regist')">添加</el-button>
                <el-button @click="resetForm('regist')">重置</el-button>
            </el-form-item>
        </el-form>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                room: {
                    rname: "",
                    price: "",
                    type: "",
                    state: "",
                    mark: ""
                },
                rules: {
                    rname: [
                        { required: true, message: '请输入房间名称', trigger: 'blur' }
                    ],
                    price: [
                        { required: true, message: '请输入房间价格', trigger: 'blur' }
                    ],
                    mark: [
                        { required: true, message: '请输入房间简介', trigger: 'blur' }
                    ],


                }

            },
            methods: {
                //提交表单
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            //axios请求服务器做添加操作
                            //获取数据
                            var params = new URLSearchParams();
                            params.append("rname", this.room.rname);
                            params.append("price", this.room.price);
                            params.append("type", this.room.type);
                            params.append("state", this.room.state);
                            params.append("mark", this.room.mark);

                            axios({
                                url: "http://localhost:8080/hotel/room?method=addRoom",
                                method: "post",
                                data: params
                            }).then(resp => {
                                if (resp.data.code == 200) {
                                    this.$message({
                                        message: '恭喜你，添加成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: '对不起，添加失败',
                                        type: 'warning'
                                    });
                                }

                                setTimeout(() => {
                                    location.href = "index.html";
                                }, 1000);
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                //重置表单
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }

            }
        })
    </script>
</body>

</html>